<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="24"><div class="centerTitle">团体报告</div></el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <home-tab :tableData= "tableData" :tableConfig="tableConfig" :slotRow="true" @operation="goToOperation"/>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import homeTab from '@/components/table.vue'
import {APIGETGROUPLIST, APIGETGROUPLISTDOWNLOAD} from '@/common/api.js'
import downloadApi from '@/common/downloadApi.js'
export default {
  components: {homeTab},
  data () {
    return {
      Api: '',
      configRow: ['input', 'input', '', '', '', '', '', '', '', '', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        plan_name: '',
        questionnaire_title: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: false, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '测评计划名称',
            prop: 'title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '组合或量表名称',
            prop: 'questionnaire_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '层级',
            prop: 'type_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '报告生成时间',
            prop: 'create_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '参与人数',
            prop: 'total_number',
            align: 'center',
            modelValue: ''
          },
          {
            label: '完成人数',
            prop: 'complete_number',
            align: 'center',
            modelValue: ''
          },
          {
            label: '测评开始时间',
            prop: 'start_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '测评结束时间',
            prop: 'end_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        plan_name: '',
        questionnaire_title: ''
      },
      menuList: []
    }
  },
  created () {
    this.tableList()
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('reportAnalysis')) {
      var operation1 = {id: 'analysis', name: '总报告分析'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('reportSchoolExport')) {
      var operation2 = {id: 'download', name: '下载'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
  },
  methods: {
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '测评计划名称') {
          this.form.plan_name = element.modelValue
        }
        if (element.label === '组合或量表名称') {
          this.form.questionnaire_title = element.modelValue
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      APIGETGROUPLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') {
        this.dataProcessing()
      } else if (val.id === 'del') {
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'analysis') {
        console.log(val.rows.plan_type === 1)
        if (val.rows.plan_type === 1) {
          window.open('/api/report/getRecommendSchoolReportView?batch=' + val.rows.batch + '&school_id=' + val.rows.school_id + '&token=' + window.sessionStorage.getItem('token'))
        } else if (val.rows.plan_type === 2) {
          window.open('/api/report/selfBuildReport?batch=' + val.rows.batch + '&school_id=' + val.rows.school_id + '&token=' + window.sessionStorage.getItem('token'))
        }
      } else if (val.id === 'download') {
        this.downloadFn(val.rows)
      }
    },
    downloadFn (val) {
      APIGETGROUPLISTDOWNLOAD({
        report_id: val.id
      }).then((res) => {
        console.log(this.Api + res.data.url + '?report_info=' + res.data.report_info)
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
